<template>
  <div class="left">
    <div class="left-s" v-if="isOpen">
      <div class="left-photo">
        <img src="../../assets/images/icon_header.png" alt />
      </div>
      <ul class="left-nav">
        <li>
          <svg title="展开" class="iconmenu ic" aria-hidden="true" @click="Open">
            <use xlink:href="#iconmenu" />
          </svg>
        </li>
        <li @click="mainItem" :class="{isColor1:isColor1}">
          <svg title="项目信息管理 " class="iconziliao ic" aria-hidden="true">
            <use xlink:href="#iconziliao" />
          </svg>
        </li>

        <li @click="projectSide" :class="{isColor2:isColor2}">
          <svg title="人员信息填报 " class="iconrenyuanguanli ic" aria-hidden="true">
            <use xlink:href="#iconrenyuanguanli" />
          </svg>
        </li>

        <li @click="epidemicRisk" :class="{isColor3:isColor3}">
          <svg title="疫情风险提示总览 " class="iconanquan ic" aria-hidden="true">
            <use xlink:href="#iconanquan" />
          </svg>
        </li>

        <li @click="attendanceInformation" :class="{isColor4:isColor4}">
          <svg title="考勤信息管理 " class="iconshouxufeisvg ic" aria-hidden="true">
            <use xlink:href="#iconshouxufeisvg" />
          </svg>
        </li>
      </ul>
    </div>
    <div class="left-y" v-if="isIndent">
      <div class="left-header">
        <div class="left-photo">
          <img src="../../assets/images/icon_header.png" alt />
        </div>
        <div class="left-title">
          <p style="font-size: 18px;color: #F8F8F8;">账户名称</p>
          <p style="font-size: 14px;color: #F8F8F8;">项目经理</p>
          <p style="font-size: 12px;color: #F8F8F8;">{{gettime}}</p>
        </div>
      </div>
      <div class="left-img">
        <svg title="缩进" class="iconmenu ic" aria-hidden="true" @click="Indent">
          <use xlink:href="#iconmenu" />
        </svg>
      </div>
      <ul class="left-list">
        <li :class="{isColor1:isColor1}">
          <div @click="mainItem">
            <div class="list-i">
              <svg title="项目信息管理" class="iconziliao ii" aria-hidden="true">
                <use xlink:href="#iconziliao" />
              </svg>
            </div>
            <span class="ib">项目信息管理</span>
            <div class="list-c"></div>
          </div>
        </li>

        <li :class="{isColor2:isColor2}">
          <div @click="projectSide">
            <div class="list-i">
              <svg title="人员信息填报" class="iconrenyuanguanli ii" aria-hidden="true">
                <use xlink:href="#iconrenyuanguanli" />
              </svg>
            </div>
            <span class="ib">人员信息管理</span>
            <div class="list-c"></div>
          </div>
        </li>

        <li :class="{isColor3:isColor3}">
          <div @click="epidemicRisk">
            <div class="list-i">
              <svg title="疫情风险提示总览" class="iconanquan ii" aria-hidden="true">
                <use xlink:href="#iconanquan" />
              </svg>
            </div>
            <span class="ib">疫情风险管理</span>
            <div class="list-c"></div>
          </div>
        </li>

        <li :class="{isColor4:isColor4}">
          <div @click="attendanceInformation">
            <div class="list-i">
              <svg title="考勤信息管理" class="iconshouxufeisvg ii" aria-hidden="true">
                <use xlink:href="#iconshouxufeisvg" />
              </svg>
            </div>
            <span class="ib">考勤信息管理</span>
            <div class="list-c"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isOpen: true,
      isIndent: false,
      gettime: "",
      isColor1: false,
      isColor2: false,
      isColor3: false,
      isColor4: false
    };
  },
  watch: {
    $route(e) {
      if (e.name === "mainItem") {
        this.isColor1 = true;
        this.isColor2 = false;
        this.isColor3 = false;
        this.isColor4 = false;
      } else if (e.name === "projectSide") {
        this.isColor2 = true;
        this.isColor1 = false;
        this.isColor3 = false;
        this.isColor4 = false;
      } else if (e.name === "epidemicRisk") {
        this.isColor3 = true;
        this.isColor1 = false;
        this.isColor2 = false;
        this.isColor4 = false;
      } else if (e.name === "attendanceInformation") {
        this.isColor4 = true;
        this.isColor3 = false;
        this.isColor2 = false;
        this.isColor1 = false;
      }
    }
  },
  created: function() {
    if (this.$route.path === "/mainItem/") {
      this.isColor1 = true;
      this.isColor2 = false;
      this.isColor3 = false;
      this.isColor4 = false;
    } else if (this.$route.path === "/projectSide/") {
      this.isColor2 = true;
      this.isColor1 = false;
      this.isColor3 = false;
      this.isColor4 = false;
    } else if (this.$route.path === "/epidemicRisk/") {
      this.isColor3 = true;
      this.isColor1 = false;
      this.isColor2 = false;
      this.isColor4 = false;
    } else if (this.$route.path === "/attendanceInformation/") {
      this.isColor4 = true;
      this.isColor3 = false;
      this.isColor2 = false;
      this.isColor1 = false;
    }
    this.timer = setInterval(() => {
      const yy = new Date().getFullYear();
      const mm = new Date().getMonth() + 1;
      const dd = new Date().getDate();
      const hh = new Date().getHours();
      const mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      const ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      this.gettime = yy + "-" + mm + "-" + dd + "  " + hh + ":" + mf + ":" + ss;
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    Open() {
      this.isOpen = !this.isOpen;
      this.isIndent = !this.isIndent;
    },
    Indent() {
      this.isOpen = true;
      this.isIndent = false;
    },
    mainItem() {
      this.$router.push({ path: `/mainItem/`, replace: true });
    },
    subItem() {
      this.$router.push({ path: `/subItem/`, replace: true });
    },
    projectSide() {
      this.$router.push({ path: `/projectSide/`, replace: true });
    },
    epidemicRisk() {
      this.$router.push({ path: `/epidemicRisk/`, replace: true });
    },
    attendanceInformation() {
      this.$router.push({ path: `/attendanceInformation/`, replace: true });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/left/left.scss";
</style>
